<!--
- File:    植物详情.
-->
<template>
  <div class="Web_Box" v-show="plantInfo.requested">
    <div class="Encyclopedias_box">
      <div class="encyimg2">
        <img @click="showOneImgBig($config.imgsite + $config.uploadImgSrc + (plantInfo.data.flower_image || plantInfo.data.m_goods_image))" :src="(plantInfo.data.flower_image || plantInfo.data.m_goods_image) ? $config.imgsite + $config.uploadImgSrc + (plantInfo.data.flower_image || plantInfo.data.m_goods_image) + '_w640h320': defaultPlantImg">
        <div class="name f-cb" style="color: #000">{{plantInfo.data.flower_name || plantInfo.data.m_name}} <span style="color: #aaa; font-size: 12px;">(编号:{{plantInfo.data.sg_id != 0 ? plantInfo.data.sg_id + '-' : ''}}{{plantInfo.data.g_id}}-{{plantInfo.data.o_id}})</span>
          <!--<i class="iconfont icon-fenxiang1"></i>-->
        </div>
        <div class="Publish_btn" @click="gotoAddArticle"><a>发表养护经验</a></div>
      </div>
    </div>
    <div class="ency_tab2">
      <div class="Tabs2">
        <ul>
          <li :class="{'on': tabType == '1'}" @click="switchTabType('1')">成长日记</li>
          <li :class="{'on': tabType == '0'}" @click="switchTabType('0')">养护事项</li>
          <li :class="{'on': tabType == '2'}" @click="switchTabType('2')">基本资料</li>
        </ul>
      </div>
    </div>
    <!--养护事项-->
    <div class="ProList" v-show="tabType == '0'">
      <div class="plant_box">
        <!--<div class="Season_tab">-->
        <!--<ul class="f-cb">-->
        <!--<li class="bor_r_3ebb6e" :class="{'cur': seasonType == '1'}" @click="switchSeasonType('1')">春</li>-->
        <!--<li class="bor_r_3ebb6e" :class="{'cur': seasonType == '2'}" @click="switchSeasonType('2')">夏</li>-->
        <!--<li class="bor_r_3ebb6e" :class="{'cur': seasonType == '3'}" @click="switchSeasonType('3')">秋</li>-->
        <!--<li :class="{'cur': seasonType == '4'}" @click="switchSeasonType('4')">冬</li>-->
        <!--</ul>-->
        <!--</div>-->
        <!--提醒-->
        <div class="watering_list2" v-for="maintain in maintainList">
          <div class="watering2 f-cb">
            <i class="iconfont" :class="getMaintainTypeIcon(maintain.ta_type)"></i><span>{{maintain.ta_type | taskTypeTxt}}</span><span class="recovery" @click="resumeSetting(maintain.ta_type)" v-show="isCurator == '1'">恢复默认设置</span>
            <i class="iconfont icon-kaiqi" v-show="maintain.ta_tip == '1' && isCurator == '1'" @click="switchNotice(maintain, '0')"></i>
            <i class="iconfont icon-guanbi" v-show="maintain.ta_tip == '0' && isCurator == '1'" @click="switchNotice(maintain, '1')"></i>
            <span class="hl" v-show="isCurator == '1'">提醒</span>
          </div>
          <div class="water_cont2">
            <ul>
              <li>重复提醒
                <i class="iconfont icon-kaiqi" style="color: #25b45b; font-size: 30px;vertical-align:top;display: block;height: 20px;float: right;line-height: 20px;" v-show="maintain.is_loop == '1' && isCurator == '1'" @click="switchLoop(maintain, '0')"></i>
                <i class="iconfont icon-guanbi" style="color: #aaa; font-size: 30px;vertical-align:top;display: block;height: 20px;float: right;line-height: 20px;" v-show="maintain.is_loop == '0' && isCurator == '1'" @click="switchLoop(maintain, '1')"></i>
              </li>
              <li>时隔天数 <a class="fr set" @click="showIntervalPicker(maintain)" v-show="isCurator == '1'">设置</a><span class="timest fr">间隔{{maintain.ta_interval}}{{maintain.ta_interval_type | taskIntervalTxt}}</span>
              </li>
              <li>提醒时间 <a class="fr set" @click="showIntervalTimePicker(maintain)" v-show="isCurator == '1'">设置</a><span class="timest fr">{{maintain.ta_time}}</span>
              </li>
              <li v-show="!$utils.empty(maintain.ta_note)">养护方式
                <!--<i class=" iconfont icon-xia"></i>-->
                <div class="yanghu" v-html="maintain.ta_note"></div>
              </li>
            </ul>
          </div>
        </div>
        <a class="ency_btn" @click="resumeAllSetting">恢复全部默认设置</a></div>
    </div>

    <!--成长日记-->
    <div class="ProList" v-show="tabType == '1'">
      <div class="GrowthDiary_box">
        <div class="GrowthDiary" v-for="note in growthNoteList.data">
          <table width="100%" border="0">
            <tr>
              <td valign="top" class="grow_left">
                <div class="grow"><img :src="getGrowthStatusImg(note.growth_status)"></div>
              </td>
              <td valign="top">
                <div class="grow_block">
                  <h1 class="title f-cb">{{note.growth_status | growthStatusTxt}}<span style="color: #aaa; margin-left: 10px">{{note.member_name}}</span><span class="tie">{{note.publish_time | timestampToDate('yyyy-MM-dd hh:mm')}} </span><a><i class="iconfont icon-bianji" @click="gotoEdit(note)" v-show="isCurator == '1'"></i></a>
                  </h1>
                  <div class="Growthstatus">
                    <ul class="f-cb">
                      <li>
                        <img style="width: 30px; height: 30px; margin-right: 5px" :src="$config.imgsite + $config.uploadImgSrc + note.d_image + '_w150'">
                      </li>
                      <li>
                        <i class="iconfont icon-shuidi1" v-show="isInList($dictionary.growthAction.watering, note.behavior)"></i>
                      </li>
                      <li>
                        <i class="iconfont icon-red2" v-show="isInList($dictionary.growthAction.fertilize, note.behavior)"></i>
                      </li>
                      <li>
                        <i class="iconfont icon-flowerpot" v-show="isInList($dictionary.growthAction.basin, note.behavior)"></i>
                      </li>
                      <li>
                        <i class="iconfont icon-jiandao" v-show="isInList($dictionary.growthAction.cut, note.behavior)"></i>
                      </li>
                      <li>
                        <i class="iconfont icon-pachong-" v-show="isInList($dictionary.growthAction.grubs, note.behavior)"></i>
                      </li>
                      <li>
                        <i class="iconfont icon-yangguang" v-show="isInList($dictionary.growthAction.sunshine, note.behavior)"></i>
                      </li>
                    </ul>
                  </div>
                  <div class="g_cont">{{note.content}}</div>
                  <ul class=" cont_mg f-cb" v-if="note.pictures && note.pictures.length > 0">
                    <li v-for="(img, imgIndex) in note.pictures" @click="showImg(note.imgList, imgIndex)"><img :src="$config.imgsite + $config.uploadImgSrc + img + '_w200'">
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="buttonfinish" @click="gotoAddGrowthNote" v-show="isCurator == '1'"><a>添加成长状态</a></div>
      <loading-more :allLoaded="growthNoteList.allLoaded" :show="growthNoteList.data.length > 0"></loading-more>
      <empty-data :show="growthNoteList.allLoaded && growthNoteList.data.length <= 0" style="margin-top: 3rem"></empty-data>
    </div>
    <!--基本资料-->
    <div class="ProList" v-show="tabType == '2'">
      <div class="Ency_block">
        <div class="encys_list f-cb" v-show="plantInfo.data.m_name">
          <div class=" fl"><i class="iconfont icon-biaoqiandao"></i><span>名称</span></div>
          <div class="fr">{{plantInfo.data.m_name}}</div>
        </div>
        <div class="encys_list f-cb" v-show="plantInfo.data.b_class_name">
          <div class=" fl"><i class="iconfont icon-fenlei1"></i><span>分类</span></div>
          <div class="fr" @click="showDetail(plantInfo.data.b_class_name, '分类')">{{plantInfo.data.b_class_name | removeBr}}</div>
        </div>
        <div class="encys_list f-cb" v-show="plantInfo.data.b_flower_lang">
          <div class=" fl"><i class="iconfont icon-fenlei"></i><span>花语</span></div>
          <div class="fr" @click="showDetail(plantInfo.data.b_flower_lang, '花语')">{{plantInfo.data.b_flower_lang | removeBr}}</div>
        </div>
        <div class="encys_list f-cb" v-show="plantInfo.data.b_fengshui">
          <div class=" fl"><i class="iconfont icon-shan"></i><span>风水</span></div>
          <div class="fr" @click="showDetail(plantInfo.data.b_fengshui, '风水')">{{plantInfo.data.b_fengshui | removeBr}}</div>
        </div>
        <div class="encys_list f-cb" v-show="plantInfo.data.b_light_name">
          <div class=" fl"><i class="iconfont icon-icon"></i><span>光照 </span></div>
          <div class="fr" @click="showDetail(plantInfo.data.b_light_description, '光照')">{{plantInfo.data.b_light_name | removeBr}}</div>
        </div>
        <div class="encys_list f-cb" v-show="plantInfo.data.b_bloom_period">
          <div class=" fl"><i class="iconfont icon-hua1"></i><span>花期</span></div>
          <div class="fr" @click="showDetail(plantInfo.data.b_bloom_period, '花期')">{{plantInfo.data.b_bloom_period | removeBr}}</div>
        </div>
        <div class="encys_list f-cb" v-show="plantInfo.data.b_fruit_period">
          <div class=" fl"><i class="iconfont icon-guoyuan"></i><span>果期</span></div>
          <div class="fr" @click="showDetail(plantInfo.data.b_fruit_period, '果期')">{{plantInfo.data.b_fruit_period | removeBr}}</div>
        </div>
        <div class="encys_list f-cb" v-show="plantInfo.data.b_tmp">
          <div class=" fl"><i class="iconfont icon-wendu1"></i><span>适宜温度</span></div>
          <div class="fr" @click="showDetail(plantInfo.data.b_tmp, '适宜温度')">{{plantInfo.data.b_tmp | removeBr}}</div>
        </div>
        <div class="encys_list f-cb" v-show="plantInfo.data.b_un_tmp">
          <div class=" fl"><i class="iconfont icon-wendu1"></i><span>不适温度</span></div>
          <div class="fr" @click="showDetail(plantInfo.data.b_un_tmp, '不适温度')">{{plantInfo.data.b_un_tmp | removeBr}}</div>
        </div>
        <div class="encys_list f-cb" v-show="plantInfo.data.b_plant">
          <div class=" fl"><i class="iconfont icon-huli"></i><span>栽植形式</span></div>
          <div class="fr" @click="showDetail(plantInfo.data.b_plant, '栽植形式')">{{plantInfo.data.b_plant | removeBr}}</div>
        </div>
        <div class="encys_list f-cb" v-show="plantInfo.data.b_reproduction">
          <div class=" fl"><i class="iconfont icon-TJ-Detail-huayuan"></i><span>繁殖方式</span></div>
          <div class="fr" @click="showDetail(plantInfo.data.b_reproduction, '繁殖方式')">{{plantInfo.data.b_reproduction | removeBr}}</div>
        </div>
        <div class="encys_list f-cb" v-show="plantInfo.data.b_position">
          <div class=" fl"><i class="iconfont icon-sheshihuayuan"></i><span>摆放位置</span></div>
          <div class="fr" @click="showDetail(plantInfo.data.b_position, '摆放位置')">{{plantInfo.data.b_position | removeBr}}</div>
        </div>
        <div class="encys_list f-cb" v-show="plantInfo.data.b_custom1">
          <div class=" fl"><i class="iconfont icon-postcode"></i><span>{{plantInfo.data.b_custom1_title}}</span></div>
          <div class="fr" @click="showDetail(plantInfo.data.b_custom1, plantInfo.data.b_custom1_title)">{{plantInfo.data.b_custom1 | removeBr}}</div>
        </div>
        <div class="encys_list f-cb" v-show="plantInfo.data.b_custom2">
          <div class=" fl"><i class="iconfont icon-postcode"></i><span>{{plantInfo.data.b_custom2_title}}</span></div>
          <div class="fr" @click="showDetail(plantInfo.data.b_custom2, plantInfo.data.b_custom2_title)">{{plantInfo.data.b_custom2 | removeBr}}</div>
        </div>
        <div class="encys_list f-cb" v-show="plantInfo.data.b_custom3">
          <div class=" fl"><i class="iconfont icon-postcode"></i><span>{{plantInfo.data.b_custom3_title}}</span></div>
          <div class="fr" @click="showDetail(plantInfo.data.b_custom3, plantInfo.data.b_custom3_title)">{{plantInfo.data.b_custom3 | removeBr}}</div>
        </div>
        <!--<div class="encys_list f-cb">-->
        <!--<div class=" fl"><i class="iconfont icon-ziliao"></i><span>描述</span></div>-->
        <!--&lt;!&ndash;<div class="fr">{{plantInfo.data.}}</div>&ndash;&gt;-->
        <!--</div>-->
        <a class="ency_btn" v-show="plantInfo.data.flower_id && plantInfo.data.flower_id != 0" @click="gotoWiki(plantInfo.data.flower_id)">养护宝典</a>
        <a class="ency_btn" v-show="plantInfo.data.m_baike_url" @click="gotoBaiduBaike(plantInfo.data.m_baike_url)">百度百科</a>
        <a class="ency_btn" @click="showPlantSheet" v-show="isCreator == '1'">编辑植物</a>
        <!--<a href="" class="ency_btn2">阵亡了</a>-->
      </div>
    </div>
    <date-picker ref="intervalPicker" @confirm="changeInterval"></date-picker>
    <time-picker ref="intervalTimePicker" @confirm="changeTimeInterval"></time-picker>
    <mt-actionsheet
      :actions="plantActions"
      v-model="plantSheetVisible">
    </mt-actionsheet>
  </div>
</template>

<script>
  import {Actionsheet} from 'mint-ui'
  import {mapModules} from 'vuet'
  import DatePicker from '../../../components/datePicker'
  import TimePicker from '../../../components/timePicker'
  import {imgPreview} from '../../../components/previewer'

  export default{
    mixins: [
      mapModules({growthNoteTmp: 'growthNoteTmp'})
    ],
    data() {
      return {
        plantId: this.$route.params.id,
        isCreator: this.$route.query.isCreator, // 0 非创建者 1 是创建者
        isCurator: this.$route.query.isCurator, // 0 非养护员 1 是养护员
        defaultPlantImg: require('../../../assets/images/plant.png'),
        plantInfo: {requested: false, data: {}},
        tabType: this.$route.query.type || '1', // 0 养护事项 1 成长日记 2 基本资料
        seasonType: 1, // 1 春 2 夏 3 秋 4 冬
        maintainList: [],
        growthNoteList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []},
        currentEditMaintain: null,
        plantSheetVisible: false,
        plantActions: [{
          name: '修改信息',
          method: this.gotoEditPlant
        }, {
          name: '删除植物',
          method: this.delPlant
        }]
      }
    },
    components: {
      'mt-actionsheet': Actionsheet,
      'date-picker': DatePicker,
      'time-picker': TimePicker
    },
    watch: {
      $route () {
        this.tabType = this.$route.query.type || '0'
      }
    },
    created() {
      // this.$native.weixinShare(window.location.href)
      this.getPlantDetailInfo()
      this.getMaintainList(this.seasonType)
      this.getGrowthNoteList(this.growthNoteList.page, this.growthNoteList.pageSize)
    },
    methods: {
      gotoBaiduBaike(url) {
//        this.$router.push({name: 'wiki-baidu', query: {url: url}})
        window.location.href = url
      },
      showImg(imgList, index) {
        imgPreview({imgList: imgList, index: index})
      },
      showOneImgBig(src) {
        let imgList = []
        let img = {src: src, w: 800, h: 600}
        this.$utils.imgLoaded(src).then(data => {
          img.w = data.width
          img.h = data.height
          imgList.push(img)
          imgPreview({imgList: imgList, index: 0})
        })
      },
      getImgListWH(imgList) {
        for (let i = 0; i < imgList.length; i++) {
          this.$utils.imgLoaded(imgList[i].src).then(img => {
            imgList[i].w = img.width
            imgList[i].h = img.height
          })
        }
      },
      gotoAddArticle() {
        this.$router.push({name: 'article-add'})
      },
      switchTabType(type) {
        this.$router.replace({
          name: '',
          params: {id: this.plantId},
          query: {type: type, isCurator: this.isCurator, isCreator: this.isCreator}
        })
      },
      switchSeasonType(type) {
        this.seasonType = type
        this.maintainList = []
        this.getMaintainList(this.seasonType)
      },
      showIntervalPicker(maintain) {
        this.currentEditMaintain = maintain
        this.$refs.intervalPicker.open()
      },
      showIntervalTimePicker(maintain) {
        this.currentEditMaintain = maintain
        this.$refs.intervalTimePicker.open()
      },
      switchNotice(maintain, notice) {
        let param = {
          o_id: maintain.o_id,
          param_type: 1,
          season: maintain.ta_season,
          ta_tip: notice,
          ta_type: maintain.ta_type
        }
        this.$request.updateMaintainInfo(param).then(data => {
          maintain.ta_tip = notice
          this.$toast('设置成功')
        })
      },
      switchLoop(maintain, value) {
        let param = {
          o_id: maintain.o_id,
          param_type: 5,
          is_loop: value,
          ta_type: maintain.ta_type
        }
        this.$request.updateMaintainInfo(param).then(data => {
          maintain.is_loop = value
          this.$toast('设置成功')
        })
      },
      getMaintainTypeIcon(type) {
        let iconName = 'icon-yezi'
        switch (type) {
          case this.$dictionary.growthAction.watering:
            iconName = 'icon-shuidi1'
            break
          case this.$dictionary.growthAction.fertilize:
            iconName = 'icon-red2'
            break
          case this.$dictionary.growthAction.basin:
            iconName = 'icon-flowerpot'
            break
          case this.$dictionary.growthAction.cut:
            iconName = 'icon-jiandao'
            break
          case this.$dictionary.growthAction.grubs:
            iconName = 'icon-pachong-'
            break
          case this.$dictionary.growthAction.sunshine:
            iconName = 'icon-yangguang'
            break
          case this.$dictionary.growthAction.other:
            iconName = 'icon-yezi'
            break
        }
        return iconName
      },
      changeInterval(value) {
        console.log(value)
        let interval = value[0]
        let intervalType
        switch (value[1]) {
          case '天':
            intervalType = '1'
            break
          case '周':
            intervalType = '2'
            break
          case '月':
            intervalType = '3'
            break
          case '年':
            intervalType = '4'
            break
        }
        let param = {
          o_id: this.currentEditMaintain.o_id,
          param_type: 2,
          season: this.currentEditMaintain.ta_season,
          ta_type: this.currentEditMaintain.ta_type,
          ta_interval: interval,
          ta_interval_type: intervalType
        }
        this.$request.updateMaintainInfo(param).then(data => {
          this.currentEditMaintain.ta_interval = interval
          this.currentEditMaintain.ta_interval_type = intervalType
          this.$toast('设置成功')
        })
      },
      changeTimeInterval(value) {
        let time = value[0] + ':' + value[1]
        console.log(time)
        let param = {
          o_id: this.currentEditMaintain.o_id,
          param_type: 3,
          season: this.currentEditMaintain.ta_season,
          ta_type: this.currentEditMaintain.ta_type,
          ta_time: time
        }
        this.$request.updateMaintainInfo(param).then(data => {
          this.currentEditMaintain.ta_time = time
          this.$toast('设置成功')
        })
      },
      isInList(value, list) {
        for (let i = 0; i < list.length; i++) {
          if (value == list[i]) {
            return true
          }
        }
        return false
      },
      getGrowthStatusImg(status) {
        let statusImg = ''
        switch (status) {
          case this.$dictionary.growthStatus.seed:
            statusImg = require('../../../assets/images/demo/grow1.png')
            break
          case this.$dictionary.growthStatus.sprout:
            statusImg = require('../../../assets/images/demo/grow3.png')
            break
          case this.$dictionary.growthStatus.seedling:
            statusImg = require('../../../assets/images/demo/grow4.png')
            break
          case this.$dictionary.growthStatus.growthed:
            statusImg = require('../../../assets/images/demo/grow5.png')
            break
        }
        return statusImg
      },
      showPlantSheet() {
        this.plantSheetVisible = true
      },
      gotoAddGrowthNote() {
        // this.$router.push({name: 'growth-add', query: {plant: this.plantId}})
        window.location.href = 'http://' + window.location.host + '/wap/garden/plant/growth/add?plant=' + this.plantId
      },
      gotoWiki(id) {
        this.$router.push({name: 'wiki', query: {id: id, type: '2'}})
      },
      gotoEdit(note) {
        this.growthNoteTmp = note
        this.$router.push({name: 'growth-edit', params: {id: this.plantId}})
      },
      getPlantDetailInfo() {
        this.$request.getPlantDetailInfo(this.plantId).then(data => {
          this.plantInfo.data = data
        }).finally(() => {
          this.plantInfo.requested = true
        })
      },
      getMaintainList(type) {
        this.$request.getMaintainList(this.plantId, type).then(data => {
          this.maintainList = data
        })
      },
      getGrowthNoteList(page, pageSize) {
        this.growthNoteList.loading = true
        this.$request.getGrowthNoteList(this.plantId, page, pageSize).then(data => {
          if (data.length < this.growthNoteList.pageSize) {
            this.growthNoteList.allLoaded = true
          }
          for (let i = 0; i < data.length; i++) {
            data[i].imgList = [] // 新定义一个数组列表，格式为photeswipe所需要的格式
            for (let j = 0; j < data[i].pictures.length; j++) {
              let src = this.$config.imgsite + this.$config.uploadImgSrc + data[i].pictures[j] + '_gdw640'
              let img = {src: src, w: 800, h: 600} // 设置为photeswipe 需要的格式，先给图片个默认宽高
              data[i].imgList.push(img)
            }
            this.getImgListWH(data[i].imgList) // 异步获取图片的实际宽高
          }
          this.growthNoteList.data = [...this.growthNoteList.data, ...data]
        }).finally(() => {
          this.growthNoteList.requested = true
          this.growthNoteList.loading = false
        })
      },
      loadMore() {
        if (this.growthNoteList.loading || this.growthNoteList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getGrowthNoteList(++this.growthNoteList.page, this.growthNoteList.pageSize)
        }, 500)
      },
      gotoEditPlant() {
        this.$router.push({name: 'plant-edit', params: {id: this.plantId}})
      },
      delPlant() {
        this.$messageBox.confirm('确定删除植物？').then(data => {
          this.$request.delPlantInGarden(this.plantId).then(data => {
            this.$toast('删除植物成功')
            this.$router.go(-1)
          }).catch(e => {
            this.$toast('删除失败:' + e.msg)
          })
        }).catch(() => {
        })
      },
      resumeSetting(action) {
        this.$messageBox.confirm('确定恢复默认设置?').then(() => {
          this.$request.resumeSetting(this.plantId, this.season, action).then(data => {
            this.maintainList = []
            this.getMaintainList(this.seasonType)
            this.$toast('恢复成功')
          })
        }).catch(() => {
        })
      },
      resumeAllSetting() {
        this.$messageBox.confirm('确定恢复默认设置?').then(action => {
          this.$request.resumeAllSetting(this.plantId, this.season).then(data => {
            this.maintainList = []
            this.getMaintainList(this.seasonType)
            this.$toast('恢复成功')
          })
        }).catch(() => {
        })
      },
      showDetail(str, title) {
        this.$messageBox.alert(str, {title: title})
      }
    }
  }
</script>

<style>

</style>